<template>
<div class="main-box">
  <!-- main容器设置滚轮事件 -->
  <div class="main" @mousewheel="mousewheel">
    <!-- 左边图片区域 -->
    <div class="leftImgArea">
      <div v-for="(img, index) in leftImgList" :key="index">
        <a href="https://placeholder.com/"><img :src="img" /></a>
        <span>这是一段文字 关于图片的文字 文字过多时可自动换行</span>
      </div>
      <!-- 滚轮向下移动时左边添加图片的区域 -->
      <a
        v-for="img in newLeftImgList"
        :key="img.lenght"
        href="https://placeholder.com/"
        ><img :src="img"
      /></a>
    </div>
    <!-- 右边图片区域 -->
    <div class="rightImgArea">
      <div v-for="(img, index) in rightImgList" :key="index">
        <a href="https://placeholder.com/"><img :src="img" /></a>
        <span>这是一段文字 关于图片的文字 关于图片的文字</span>
      </div>
      <!-- 滚轮向下移动时右边添加图片的区域 -->
      <a
        v-for="img in newRightImgList"
        :key="img.lenght"
        href="https://placeholder.com/"
        ><img :src="img"
      /></a>
    </div>
  </div>
</div>
  
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 左右两边添加的图片的高度大小
      leftRandom: this.rand(150, 300),
      rightRandom: this.rand(150, 300),
      // 左右两边添加的新图片url
      newLeftImgList: [],
      newRightImgList: [],
    };
  },
  created() {
    // 调用vuex中的actions
    this.$store.dispatch("getLeftImg");
    this.$store.dispatch("getRightImg");
  },
  computed: {
    // 从vuex中获取state的数据
    ...mapState(["leftImgList", "rightImgList"]),
  },
  methods: {
    // 取随机数的方法
    rand(m, n) {
      return Math.ceil(Math.random() * (n - m + 1) + m - 1);
    },
    getNewImg() {
      // 将新的图片加入列表
      this.newLeftImgList.push(
        `https://via.placeholder.com/175x${this.leftRandom}/000?text=New picture`
      );
      this.newRightImgList.push(
        `https://via.placeholder.com/175x${this.rightRandom}/000?text=New picture`
      );
      // 重新给高度赋随机数值
      this.leftRandom = this.rand(150, 300);
      this.rightRandom = this.rand(150, 300);
    },
    // 节流
    throttle(fun, delay) {
      let timeout;
      return function (args) {
        let that = this;
        let _args = args;
        if (!timeout) {
          timeout = setTimeout(() => {
            // 清空⽤过的但已经到时的计时器
            timeout = null;
            fun.apply(that, _args);
          }, delay);
        }
      };
    },
    // 滚轮的回调
    mousewheel() {
      // main容器的高度
      const scrollHeight = document.querySelector(".main").scrollHeight;
      // 当前可视区的顶部到页面顶部的高度
      const scrollTop = document.querySelector(".main").scrollTop;
      // 当前可视区的高度
      const clientHeight = document.documentElement.clientHeight;
      // 可视区底部到页面底部的高度，即滚动条与底部的距离
      const instance = scrollHeight - scrollTop - clientHeight;
      if (instance < 100) {
        let fn = this.throttle(this.getNewImg, 1000);
        // 调用节流函数
        fn();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  height: 620px;
  overflow: auto;
  background-color: white;
}
.leftImgArea {
  // display: inline-block;
  float: left;
  // margin-left: 5px;
  margin-right: 5px;
  a {
    display: block;
  }
  span {
    display: block;
    width: 160px;
    word-wrap: normal;
  }
}
.rightImgArea {
  a {
    display: block;
  }
  span {
    display: block;
    // margin-left: 17px;
    // width: 100px;
    word-wrap: normal;
  }
}
</style>